{% extends 'app.html' %}

{% block title %}Wunjo{% endblock %}

{% block nav %}{{ _('Highlights') }}{% endblock %}

{% block head %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='basic/css/calendar.css') }}">
<style>
    .word { cursor: pointer; }
    .highlight { background: rgb(200 237 210); color: black }
</style>
{% endblock %}

{% block menubar %}
{% endblock %}

{% block sections %}
<!--TEMPLATE-->
<!--MODAL SELECT METHOD-->
<template class="modal-smart-crop-template">
    <div class="modal-root">
        <div class="fixed backdrop-blur-xl top-0 left-0 h-screen w-full flex items-center justify-center z-[9999] p-3.75 md:p-10 bg-black bg-opacity-40">
            <div class="relative flex flex-col gap-5 p-5 rounded-[.625rem] bg-dark-pop-up w-full max-w-[390px]">
                <button onclick="closeModal(this);" type="button" class="absolute top-2 right-2 opacity-60 hover:opacity-100 transition-opacity">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="white"><path d="M15 5L5 15M5 5L15 15" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                </button>
                <h2 class="text-accent-primary text-heading-3-mobile md:text-heading-3 uppercase font-alumni h2-alumni">{{ _('Aspect ratio select') }}</h2>

                <div style="overflow-x: auto;overflow-y: auto;max-height: 60vh;" class="modal-parameters gap-2.5 grid flex-col"> </div>

                <p class="text-s">{{ _('An custom artificial intelligence system analyzes video frames to detect key subjects and speaking individuals, aligning lip movements with speech to focus on the most meaningful parts of the content. Perfect to create preview and shorts video.') }}</p>
                <div class="flex gap-3 items-center w-full">
                    <button is="button-primary" extra-icon='<i class="fa-solid fa-crope"></i>' is-pro="true" class="crop-submit w-full items-baseline" name="{{ _('Crop') }}"></button>
                </div>
            </div>
        </div>
    </div>
</template>

<template class="modal-highlights-template">
    <div class="modal-root">
        <div class="fixed backdrop-blur-xl top-0 left-0 h-screen w-full flex items-center justify-center z-[9999] p-3.75 md:p-10 bg-black bg-opacity-40">
            <div class="relative flex flex-col gap-5 p-5 rounded-[.625rem] bg-dark-pop-up w-full max-w-[390px]">
                <button onclick="closeModal(this);" type="button" class="absolute top-2 right-2 opacity-60 hover:opacity-100 transition-opacity">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="white"><path d="M15 5L5 15M5 5L15 15" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                </button>
                <h2 class="text-accent-primary text-heading-3-mobile md:text-heading-3 uppercase font-alumni h2-alumni">{{ _('Model select') }}</h2>

                <p class="text-s"><b>{{ _('Visual Method') }}.</b> {{ _('The method works with video by analyzing visual elements, remembering all movements, colors, and objects. It’s ideal for sports events or movies.') }}</p>
                <div class="flex gap-3 items-center w-full">
                    <button is="button-secondary" extra-icon='<i class="fa-solid fa-video"></i>' class="visual-submit w-full items-baseline" name="{{ _('Visual') }}"></button>
                </div>

                <div class="flex gap-5 items-center mt-2"><span class="flex-1 h-px bg-light-border"></span><p class="text-s-mobile md:text-s">{{ _('or') }}</p><span class="flex-1 h-px bg-light-border"></span></div>

                <p class="text-s"><b>{{ _('Sound Method') }}.</b> {{ _('The method works with audio based on speech, capturing what people say. Perfect for podcasts, interviews, or news.') }}</p>
                <div class="flex gap-3 items-center w-full">
                    <button is="button-primary" extra-icon='<i class="fa-solid fa-microphone"></i>' is-pro="true" class="sound-submit w-full items-baseline" name="{{ _('Sound') }}"></button>
                </div>
            </div>
        </div>
    </div>
</template>
<!--MODAL SELECT METHOD-->

<template class="modal-assistant-highlights-template">
    <div class="modal-root">
        <div class="fixed backdrop-blur-xl top-0 left-0 h-screen w-full flex items-center justify-center z-[9999] p-3.75 md:p-10 bg-black bg-opacity-40">
            <div class="relative flex flex-col gap-5 p-5 rounded-[.625rem] bg-dark-pop-up w-full max-w-2xl">
                <button onclick="closeModal(this);" type="button" class="absolute top-2 right-2 opacity-60 hover:opacity-100 transition-opacity">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="white"><path d="M15 5L5 15M5 5L15 15" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                </button>
                <h2 class="text-accent-primary font-alumni text-heading-3-mobile md:text-heading-3 uppercase h2-alumni">{{ _('What is your question?') }}</h2>

                <template_element class="component-video-player-template"></template_element>
                <template_element class="component-audio-player-template"></template_element>

                <div class="flex flex-row justify-between">
                    <div class="relative flex items-end gap-2 bg-dark-elements rounded-[.625rem] py-2 pl-4 pr-2 min-h-[3rem] w-full">
                        <textarea maxlength="3000" placeholder="{{ _('You can ask what is happening in the video or its segment, key takeaways, which sounds to use for editing, or any other question based on the video. The maximum number of symbols is 3000.') }}" class="modal-input-question bg-transparent appearance-none outline-none w-full resize-none placeholder:text-light-secondary disabled:cursor-not-allowed text-prompt-mobile lg:text-prompt self-center" rows="1" style="font-kerning: auto; font-optical-sizing: auto; font-stretch: 100%; height: 150px;"></textarea>
                    </div>
                    <span class="ml-5 mr-5 w-px bg-white bg-opacity-[.15] shrink-0"></span>
                    <div class="relative flex items-end gap-2 bg-dark-elements rounded-[.625rem] py-2 pl-4 pr-2 min-h-[3rem] w-full">
                        <textarea placeholder="{{ _('Your answer will appear in this textarea.') }}" disabled class="modal-output bg-transparent appearance-none outline-none w-full resize-none placeholder:text-light-secondary disabled:cursor-not-allowed text-prompt-mobile lg:text-prompt self-center"  rows="1" style="font-kerning: auto; font-optical-sizing: auto; font-stretch: 100%; height: 150px;"></textarea>
                        <div class="flex flex-col h-full">
                            <button onclick="navigator.clipboard.writeText(document.querySelector('.modal-output').value).then(() => console.log('Copied'));" style="scale: .8;" class="rounded p-1 border border-white opacity-40 group-hover:opacity-60 transition-opacity">
                                <svg width="16px" height="16px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m0 0h32v32h-32z"></path><path d="m27 0c2.7614237 0 5 2.23857625 5 5v14c0 2.7614237-2.2385763 5-5 5h-3v3.3333333c0 2.5057364-1.9748757 4.5502158-4.4530532 4.6618646l-.2136135.0048021h-14.66666663c-2.50573637 0-4.55021581-1.9748757-4.66186456-4.4530532l-.00480211-.2136135v-14.6666666c0-2.5057364 1.97487565-4.55021584 4.4530532-4.66186459l.21361347-.00480211h3.33333333v-3c0-2.76142375 2.2385763-5 5-5zm-19 10h-3.33333333c-1.41611475 0-2.57441514 1.1038344-2.66142033 2.4980225l-.00524634.1686442v14.6666666c0 1.4161148 1.10383444 2.5744152 2.49802247 2.6614204l.1686442.0052463h14.66666663c1.4161148 0 2.5744152-1.1038344 2.6614204-2.4980225l.0052463-.1686442v-3.3333333h-9c-2.7614237 0-5-2.2385763-5-5zm19-8h-14c-1.5976809 0-2.9036609 1.24891996-2.9949073 2.82372721l-.0050927.17627279v14c0 1.5976809 1.24892 2.9036609 2.8237272 2.9949073l.1762728.0050927h14c1.5976809 0 2.9036609-1.24892 2.9949073-2.8237272l.0050927-.1762728v-14c0-1.59768088-1.24892-2.90366088-2.8237272-2.99490731z" fill="white" fill-rule="nonzero"></path></g></svg>
                            </button>
                            <div></div>
                        </div>
                    </div>
                </div>

                <div class="flex gap-2 justify-between">
                    <button is="button-secondary" extra-icon='<i class="fa-regular fa-rectangle-list"></i>' class="transcribe-button w-full items-baseline" name="{{ _('Transcribe') }}"></button>
                    <button is="button-primary" extra-icon='<i class="fa-regular fa-message"></i>' class="submit-question w-full items-baseline" name="{{ _('Chat') }}"></button>
                </div>
            </div>
        </div>
    </div>
</template>

<template class="modal-smart-cut-template">
    <div class="modal-root">
        <div class="fixed backdrop-blur-xl top-0 left-0 h-screen w-full flex items-center justify-center z-[9999] p-3.75 md:p-10 bg-black bg-opacity-40">
            <div class="relative flex flex-col gap-5 p-5 rounded-[.625rem] bg-dark-pop-up w-full max-w-2xl">
                <button onclick="closeModal(this);" type="button" class="absolute top-2 right-2 opacity-60 hover:opacity-100 transition-opacity">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="white"><path d="M15 5L5 15M5 5L15 15" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                </button>
                <h2 class="text-accent-primary font-alumni text-heading-3-mobile md:text-heading-3 uppercase h2-alumni">{{ _('Smart cutter') }}</h2>

                <template_element class="component-video-player-template"></template_element>
                <template_element class="component-audio-player-template"></template_element>

                <div class="flex flex-row justify-between">
                    <div class="relative flex flex-col items-end gap-2 bg-dark-elements rounded-[.625rem] py-2 pl-4 pr-2 min-h-[3rem] w-full">
                        <div contenteditable="false" class="modal-smart-cut bg-transparent appearance-none outline-none w-full resize-none placeholder:text-light-secondary disabled:cursor-not-allowed text-prompt-mobile lg:text-prompt self-center inline" style="font-kerning: auto; font-optical-sizing: auto; font-stretch: 100%; height: 150px;user-select: text;overflow-y: auto;line-height: 1.1lh;"><span>{{ _('Once the text appears, highlight words or phrases to select video or audio segments to edit a media file. Click again to deselect.') }}</span></div>
                        <div class="sequence-timeline__controls js-timeline-controls flex flex-1 items-center bg-dark-elements rounded-md hidden w-full">
                            <button disabled class="sequence-timeline__control js-timeline-start-back relative group flex items-center gap-2 py-1.5 flex-1 justify-center px-2">
                                <i class="fa-solid fa-caret-left opacity-60 group-hover:opacity-100 group-hover:-mt-0.5 transition-all"></i>
                            </button>
                            <div class="relative group flex items-center gap-2 py-1.5 flex-1 justify-center px-2">
                                <input disabled class="sequence-timeline__control js-timeline-start-input w-14 text-m-mobile lg:text-m rounded-md bg-dark-elements box-content text-center outline-none" min="0" step="0.05" type="number" max="48.64">
                            </div>
                            <button disabled class="sequence-timeline__control js-timeline-start-forward relative group flex items-center gap-2 py-1.5 px-2 flex-1 justify-center">
                                <i class="fa-solid fa-caret-right opacity-60 group-hover:opacity-100 group-hover:-mt-0.5 transition-all"></i>
                            </button>
                            <span class="w-px bg-white bg-opacity-[.15] h-5 shrink-0"></span>
                            <button disabled class="sequence-timeline__control js-timeline-end-back relative group flex items-center gap-2 py-1.5 flex-1 justify-center px-2">
                                <i class="fa-solid fa-caret-left opacity-60 group-hover:opacity-100 group-hover:-mt-0.5 transition-all"></i>
                            </button>
                            <div class="relative group flex items-center gap-2 py-1.5 flex-1 justify-center px-2">
                                <input disabled class="sequence-timeline__control js-timeline-end-input w-14 text-m-mobile lg:text-m rounded-md bg-dark-elements box-content text-center outline-none" min="0" step="0.05" type="number" max="48.64">
                            </div>
                            <button disabled class="sequence-timeline__control js-timeline-end-forward relative group flex items-center gap-2 py-1.5 px-2 flex-1 justify-center">
                                <i class="fa-solid fa-caret-right opacity-60 group-hover:opacity-100 group-hover:-mt-0.5 transition-all"></i>
                            </button>
                            <button disabled class="sequence-timeline__delete js-timeline-delete relative group flex items-center gap-2 py-1.5 px-2 flex-1 justify-center">
                                <svg class="opacity-60 group-hover:opacity-100 group-hover:-mt-0.5 transition-all" width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M18 6V16.2C18 17.8802 18 18.7202 17.673 19.362C17.3854 19.9265 16.9265 20.3854 16.362 20.673C15.7202 21 14.8802 21 13.2 21H10.8C9.11984 21 8.27976 21 7.63803 20.673C7.07354 20.3854 6.6146 19.9265 6.32698 19.362C6 18.7202 6 17.8802 6 16.2V6M14 10V17M10 10V17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                                <span class="hidden">{{ _('Delete') }}</span>
                            </button>
                        </div>
                        <div class="modal-smart-sequence bg-transparent appearance-none outline-none w-full resize-none placeholder:text-light-secondary disabled:cursor-not-allowed text-prompt-mobile lg:text-prompt self-center inline hidden" style="font-kerning: auto; font-optical-sizing: auto; font-stretch: 100%; height: 150px;user-select: text;overflow-y: auto;line-height: 1.1lh;"></div>
                    </div>
                </div>

                <div class="flex gap-2 justify-between">
                    <button disabled is="button-secondary" class="back-smart-cut w-full items-baseline" name="{{ _('Back') }}"></button>
                    <button disabled is="button-primary" class="continue-smart-cut w-full items-baseline" name="{{ _('Continue') }}"></button>
                    <button is="button-primary" extra-icon='<i class="fa-solid fa-scissors"></i>' class="submit-smart-cut w-full items-baseline hidden" name="{{ _('Cut') }}"></button>
                </div>
            </div>
        </div>
    </div>
</template>
<!--TEMPLATE-->

<!--In order to see menu like freeze add in class sticky else remove sticky-->
<div class="flex justify-center md:justify-between items-center top-[calc(var(--navbar-height)_+_20px_+_var(--navbar-top-mobile))] md:top-[calc(var(--navbar-height)_+_20px_+_var(--navbar-top))] transition-[top] w-full z-10 pointer-events-none mb-4">
    <div data-tour="module" data-position="bottom" data-title="{{ _('Calendar') }}" data-intro="{{ _('You can select specific dates or date ranges to filter the content you have previously created.') }}" data-step="2" class="flex items-center p-1 rounded-[.625rem] gap-2 relative bg-dark-pop-up pointer-events-auto shadow-floating-button">
        <div class="user-calendar-date-bg w-24 h-9 py-2 rounded-md absolute z-0 top-1 transition-transform bg-accent-primary" style="transform:translateX(calc(0% + 0px));"></div>
        <div class="user-calendar-date w-24 font-extra-thick transition-[color] relative z-10 h-9 py-2 text-center rounded-md text-dark-background font-alumni text-heading-3">{{ _('Today') }}</div>
        <button onclick="openCalendarModal(true, () => reloadViewContent(moduleName, userFileFormats));" class="relative z-10 w-9 h-9 text-center"><i class="fa-regular fa-calendar"></i></button>
    </div>
</div>

<div class="view-filter"></div>

<div class="flex flex-col gap-10 pt-10">
    <div class="view-content grid gap-10 w-full mx-auto grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-3"></div>
    <div class="mb-[34px]"></div>
</div>

{% endblock %}

{% block footer %}
<div class="footer-block px-4 pt-4 pb-5 md:border-t border-t-white border-opacity-[.15]"></div>
{% endblock %}

{% block scripts %}
<script>
    const userContentId = {{ user_content_id|tojson|safe }};
    const userFileTree = {{ user_file_tree|tojson|safe }};
    const pageFileFormats = ["video", "audio"];
    let userFileFormats = pageFileFormats;
    const moduleName = {{ folder_name|tojson|safe }};
    const moduleCutName = {{ cut_method|tojson|safe }};
    const maxDurationToShow = {{ max_duration_sec|tojson|safe }};
    // Set the maximum file size to read (in bytes)
    const maxFileSize = {{ max_files_size|tojson|safe }};
</script>
<script>
    function initScript() {
        // Import and initialize the content script here
        const scriptView = document.createElement('script');
        scriptView.src = "{{ url_for('static', filename='content/js/view.min.js') }}";
        document.body.appendChild(scriptView);
        document.querySelector('.view-filter').appendChild(createViewFilter());

        const scriptGeneration = document.createElement('script');
        scriptGeneration.src = "{{ url_for('static', filename='modules/js/highlights.min.js') }}";
        document.body.appendChild(scriptGeneration);

        getModuleTaskEventWithIntervalImmediately();

        // Tour for new users
        const tour = {{ tour|tojson|safe }};
        if (tour === true) {
            setTimeout(() => {
                const footer = document.querySelector('footer');
                footer.setAttribute("data-tour", "module");
                footer.setAttribute("data-position", "bottom-right");
                footer.setAttribute("data-title", `{{ _('Upload file') }}`);
                footer.setAttribute("data-step", "1");
                footer.setAttribute("data-intro", `{{ _('Drag and drop a file or select one. You can upload a video and write how to edit the video, but the latter is not necessary. For instructions on how to use the Highlights module, check out this') }} <a target="_blank" rel="noopener noreferrer" class="pb-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background" href="https://youtu.be/LIMlsOZdzWM?feature=shared&t=354">{{ _('tutorial') }}</a>.<br><br><text class="text-accent-primary">{{ _('Briefly') }}:</text> {{ _('Use a video, and then press the') }} <button class="p-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background"><svg class="paper" width="14px" height="14px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M231.626,128a16.015,16.015,0,0,1-8.18262,13.96094L54.53027,236.55273a15.87654,15.87654,0,0,1-18.14648-1.74023,15.87132,15.87132,0,0,1-4.74024-17.60156L60.64746,136H136a8,8,0,0,0,0-16H60.64746L31.64355,38.78906A16.00042,16.00042,0,0,1,54.5293,19.44727l168.915,94.59179A16.01613,16.01613,0,0,1,231.626,128Z"></path></svg></button>.`);
                startDataTour('module', true);
            }, 100);
        };
    }
</script>
{% endblock %}